<template>
  <!-- 添加 -->
  <el-row class="ac">
    <el-col :span="12" class="dflex">
      <div class="o-picker" v-show="dNone">
        <el-date-picker
          width="300px"
          ref="pickerRef"
          v-model="pickerDate"
          type="daterange"
          unlink-panels
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
          :shortcuts="shortcuts"
          format="YYYY/MM/DD"
          value-format="x"
          :teleported="true"
          :popper-class="{ popperPicker: !dNone }"
        />
      </div>
      <el-dropdown trigger="click">
        <el-button type="default" class="addBt bt24px" :icon="Plus"
          >Add Filters</el-button
        >

        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="onPicker"
              ><el-icon><Calendar /></el-icon>Order time</el-dropdown-item
            >
            <el-dropdown-item
              ><el-icon><ShoppingBag /></el-icon>Store</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown></el-col
    >
    <el-col :span="12" class="text-align-right">
      <!-- 导出 -->
      <el-dropdown
        @click="dialogVisible = true"
        trigger="click"
        split-button
        type="OF"
        class="exportDropdown"
        placement="right"
      >
        Export order
        <template #dropdown>
          <!-- <div class="dropdownTxt">
          <el-input
            v-model="textarea"
            :rows="2"
            type="textarea"
            autosize
            placeholder="Max 200 Order ID，for example:
1001003
1002004
1002005"
          />
          <el-button class="SearchBt" type="danger">Search</el-button>
        </div> -->
          <el-dropdown-menu>
            <el-dropdown-item>Sync order</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown></el-col
    >
  </el-row>
  <!-- 导出选项 -->
  <el-dialog
    custom-class="ExportClass"
    v-model="dialogVisible"
    title="Order Export"
    width="480"
  >
    <el-form label-position="top" :model="form" label-width="120px">
      <el-form-item label="Resources">
        <el-radio-group v-model="form.resource1">
          <el-radio label="All" />
          <el-radio label="Unfullfilled" />
          <el-radio label="fullfilled" />
          <el-radio label="Pending" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="Export Format">
        <el-radio-group v-model="form.resource2">
          <el-radio label="xls" />
          <el-radio label="xlsx" />
          <el-radio label="csv" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="Create Time">
        <!--  -->
        <div class="picker">
          <el-date-picker
            v-model="form.resource3"
            type="daterange"
            start-placeholder="Start Date"
            end-placeholder="End Date"
            :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
          />
        </div>

        <!--  -->
      </el-form-item>
      <el-form-item>
        <div class="jc">
          <el-button type="default" @click="dialogVisible = false"
            >Cancel</el-button
          >

          <el-button type="danger" @click="onSubmit">Export</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import { Plus } from "@element-plus/icons-vue";

import { ref, reactive, watch } from "vue";
const pickerDate = ref("");
const pickerRef = ref();
const dNone = ref(false);
// const textarea = ref("");

const dialogVisible = ref(false);

const form = reactive({
  resource1: "",
  resource2: "",
  resource3: "",
});

const onSubmit = () => {
  console.log(form, "submit!");
};
const shortcuts = [
  {
    text: "Last week",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "Last month",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "Last 3 months",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
watch(pickerDate, () => {
  console.log("侦听整个 userInfo ", pickerDate.value);
  if (pickerDate.value) {
    dNone.value = true;
  } else {
    dNone.value = false;
  }
});
const onPicker = () => {
  pickerRef.value.handleOpen();
};
</script>
<style lang="scss" scoped>
.ac {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0 15px 0;
}
.exportDropdown .el-dropdown-menu {
  width: 400px;
  height: 200px;
}
.o-picker {
  margin-right: 10px;
}

::v-deep .el-date-editor.el-input__wrapper {
  height: 24px;
}
.jc {
  width: 100%;
  text-align: center;
  margin: 20px 0 -18px 0;
}
.dropdownTxt {
  display: flex;
  width: 400px;
  padding: 20px;
  .SearchBt {
    margin-left: 10px;
  }
}
// ::v-deep .el-dropdown-menu__item {
//   margin-right: 20px;
// }
</style>
